import React from "react";
import { Debounce } from "../../../common/core/decorator";
import { service } from "../service/service";
import { confSrore } from "../service/store";

interface IProps {
  name: string
}

class State {
  public data: any
}

export default class Chart extends React.Component<IProps> {
  public static info = {
    name: "Chart",
    sourceUrl: 'https://www.easy-mock.com/mock/5b55575020511b117b20c758/example/chartsData',
    formater: 'data'
  }

  public state = new State()

  public render() {
    return <div style={{ height: '100%' }} >
      {JSON.stringify(this.state.data)}
    </div>
  }

  public async componentDidMount() {
    confSrore.subscribe(_ => {
      this.setData()
    })
  }

  @Debounce(500)
  private async setData() {
    const chartConf = service.getItemConf(this.props.name) || Chart.info
    let data = await fetch(Chart.info.sourceUrl).then(res => res.json())
    data = eval(chartConf.formater)
    this.setState({data})
  }
}